<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BOSS直聘22001011032刘晓妍</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/goPage.js"></script>
    <script src="./js/getname.js"></script>
  </head>
  <body>
    <header class="header">
      <div class="logo">BOSS直聘</div>
      <nav class="nav-menu">
        <a href="./index.html">首页</a>
        <a href="./recommend.html">推荐</a>
        <a href="#">搜索·公司</a>
        <a href="#">校园·海归</a>
        <a href="#">APP</a>
        <a href="#">资讯</a>
        <a href="#">有了</a>
        <a href="#">海外</a>
        <a href="#">无障碍专区</a>
      </nav>
      <div class="user-info">
        <span>消息</span>
        <span>简历</span>
        <span id="username" onclick="goToPage('./user.html')">默认用户名</span>
      </div>
    </header>

    <main>
      <section class="hero">
        <h1>托工作,上BOSS直聘</h1>
        <p>直接安心工作,轻松连接</p>
        <div class="search-box">
          <input type="text" placeholder="搜索职位/公司/地图" />
          <button>搜索</button>
        </div>
      </section>

      <div style="display: flex; margin: 40px 20px">
        <div class="sjob-list">
          <div class="job-box" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
            <p>互联网/AI</p>
            <p>前端开发工程师</p>
            <p>UE4</p>
            <p>技术美术</p>
            <p>JAVA</p>
            <p>c++</p>
            <p>c#</p>
            <p>.NET</p>
            <div class="popup">这是互联网/AI的详细描述。</div>
          </div>
          <div class="job-box" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
            <p>产品</p>
            <p>产品经理</p>
            <p>产品助理</p>
            <p>金融产品经理</p>
            <p>用户研究</p>
            <p>化妆品产品经理</p>
            <div class="popup">这是产品类别的详细描述。</div>
          </div>
          <div class="job-box" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
            <p>客服运营</p>
            <p>客服专员</p>
            <p>客服主管</p>
            <p>客服经理</p>
            <p>运营经理</p>
            <p>淘宝运营</p>
            <div class="popup">这是客服运营的详细描述。</div>
          </div>
          <div class="job-box" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
            <p>销售</p>
            <p>销售专员</p>
            <p>电话销售</p>
            <p>网络销售</p>
            <p>销售总监</p>
            <p>销售VP</p>
            <p>汽车销售</p>
            <div class="popup">这是销售的详细描述。</div>
          </div>
          <div class="job-box" onmouseover="showPopup(this)" onmouseout="hidePopup(this)">
            <p>人力/行政/法务</p>
            <p>人力资源专员/助理</p>
            <p>档案助理</p>
            <p>行政总监</p>
            <p>前台</p>
            <p>后勤</p>
            <div class="popup">这是人力/行政/法务的详细描述。</div>
          </div>
        </div>
        <div style="width: 45%; margin-left: 60px">
          <div style="display: flex">
            <img style="width: 50%; height: 140px" src="./imgs/job.png" alt="" />
            <img style="width: 50%; height: 140px" src="./imgs/job2.png" alt="" />
          </div>
          <div>
            <img style="width: 100%; height: 160px" src="./imgs/job3.png" alt="" />
          </div>
        </div>
      </div>

      <!-- <div id="job-list-container" style="display: flex; margin: 40px 20px"></div> -->

      <!--<section class="features">
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">滚梯网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>天津 河东区 大直沽</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">滚梯网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>天津 河东区 大直沽</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">滚梯网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>天津 河东区 大直沽</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">滚梯网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>天津 河东区 大直沽</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">滚梯网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>天津 河东区 大直沽</p>
          </div>
        </div>
      </section>-->

      <section
        class="features"
        id="job-list"
        style="display: flex; flex-wrap: wrap"></section>
      <!-- <section class="features">
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">智华科技有限公司</p>
          </div>
          <div class="location-info">
            <p>沙河口星海广场</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">数据标注员</h3>
            <p class="salary">120-250元/天</p>
            <p class="education">大专及以上</p>
            <p class="company">云智数据有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 高新园区 高新街</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">网络推广员</h3>
            <p class="salary">150-300元/天</p>
            <p class="education">大专及以上</p>
            <p class="company">星辰网络有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 中山区 中山路</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">在线客服</h3>
            <p class="salary">150-300元/天</p>
            <p class="education">大专及以上</p>
            <p class="company">优联科技有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 金州区 金州街</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">产品测试员</h3>
            <p class="salary">100-200元/天</p>
            <p class="education">学历不限</p>
            <p class="company">亿腾科技有限公司</p>
          </div>
          <div class="location-info">
            <p>甘井子区大连湾</p>
          </div>
        </div>
      </section>

      <section class="features">
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">居家兼职</h3>
            <p class="salary">100-280元/天</p>
            <p class="education">学历不限</p>
            <p class="company">聚集科技有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 旅顺口区 旅顺街</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">网络推广员</h3>
            <p class="salary">150-300元/天</p>
            <p class="education">大专及以上</p>
            <p class="company">精英网络科技有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 沙河口区 香炉礁</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">数据标注员</h3>
            <p class="salary">120-250元/天</p>
            <p class="education">学历不限</p>
            <p class="company">智汇数据服务有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 中山区 星海湾</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">在线客服</h3>
            <p class="salary">150-280元/天</p>
            <p class="education">大专及以上</p>
            <p class="company">智慧网络有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 高新区 数码园</p>
          </div>
        </div>
        <div class="job-listing">
          <div class="job-info">
            <h3 class="job-title">产品测试员</h3>
            <p class="salary">100-200元/天</p>
            <p class="education">学历不限</p>
            <p class="company">天启科技有限公司</p>
          </div>
          <div class="location-info">
            <p>大连 甘井子区 新兴路</p>
          </div>
        </div>
      </section> -->
    </main>

    <footer>
      <p>&copy; 2023 BOSS直聘. All rights reserved.</p>
    </footer>

    <script src="./js/index.js"></script>
  </body>
</html>
